<template>
    <div class="divBox">
        <div class="center">
            <img src= "http://localhost:5000/dev-api/files/1722390003016-avatar.png" class="img">
            <div class = "center_bottom">
                <button @click="goToHome" class="btn">博客首页</button>
                <div class="icons">
                    <div class="icon_item" @click="gotoOtherUrl('https://blog.csdn.net/2301_78992106')">
                        <img src = "../assets/csdn.png" class="icon">
                        csdn
                    </div>
                    <div class="icon_item" @click="gotoOtherUrl('https://www.cnblogs.com/new-one')">
                        <img src = "../assets/博客园.png" class="icon">
                        news_one
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {useRouter} from 'vue-router';

const router = useRouter();
const goToHome = ()=>{
    router.push('/front/home'); // ← 调用 push
    console.log(route)
}
const gotoOtherUrl = (url) => {
    console.log("练习");
    window.open(url, '_blank');
};


</script>

<style>
.divBox{    
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: url('../assets/海边.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.center{   
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    width: 250px;
    padding:30px;
    border: 1px solid black;
    background-color: #fff;
    border-radius: 10px;
    opacity: 0.6;
}
.img{
    width: 100px;
    border-radius: 100px;
    border: 1px dotted black;
}


/* 按钮样式开始 */
.btn{
    padding: 10px;
}

.btn:hover{
    cursor: pointer;
}


/**按钮样式结束 */

.center_bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px auto;
}
.btn{
    padding: 3px;
}

.icons{
    display: flex;
    margin: 10px auto;
}

.icon_item{
    display: flex;
    border: 1px dotted black;
    border-radius: 10px;
    padding: 4px;
    height: 30px;
    line-height: -20px;
    margin: auto 10px;
}

.icon_item img{
    margin-right: 4px;
}


.icon_item:hover{
    background-color: #3b3838;
    cursor: pointer;
}

.icon{
    font-size: 12px;
    width: 40%;
}



</style>